<!DOCTYPE html>
<!--[if IE 7 ]><html lang="en" class="no-js ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
   <title>Smart</title>
   <link href="css/style.css" rel="stylesheet" type="text/css" />
   <link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
   <link href="css/isotope.css" rel="stylesheet" type="text/css" />
   <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
   <!--[if lte IE 7]>
   <link rel="stylesheet" href="css/ie7.css" media="screen" />
   <![endif]-->
   
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
   <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
   <script type="text/javascript" src="js/twitter.js"></script>
   <script type="text/javascript" src="js/main.js"></script>
   <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
   <!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
<meta charset="UTF-8"></head>
<body>
<!-- BEGIN .header-bg -->
   <section id="top">
    <div class="top_inner wrapper clearfix">
      <div class="socialmedia right">
        <ul class="social">
          <li><a href="#" class="twitter"></a></li>
          <li><a href="#" class="facebook"></a></li>
          <li><a href="#" class="gplus"></a></li>
          <li><a href="#" class="dribbble"></a></li>
          <li><a href="#" class="fivehundredpx"></a></li>
          <li><a href="#" class="flickr"></a></li>
          <li><a href="#" class="vimeo"></a></li>
          <li><a href="#" class="youtube"></a></li>
          <li><a href="#" class="pinterest"></a></li>
          <li><a href="#" class="deviantart"></a></li>
          <li><a href="#" class="foursquare"></a></li>
          <li><a href="#" class="wordpress"></a></li>
          <li><a href="#" class="feed"></a></li>
        </ul>
     </div>
   </div>
 </section>
 <div id="header">
   <div class="wrapper clearfix">

     <!-- BEGIN: logo -->
            <div id="left">
                <a href="./index.html" id="logo"><img src="./images/logo.png" alt="Logo" /></a>
            </div><!-- END: logo -->
     <!-- BEGIN: menu -->
     <div id="right">
     <ul id="menu">
       <li><a href="index.html#home" class="nav_home">Home</a><span>Home Page</span></li>
       <li><a href="index.html#about" class="nav_about">About</a><span>About Page</span></li>
       <li><a href="index.html#portfolio" class="nav_portfolio current">Portfolio</a><span>Portfolio Page</span></li>
       <li><a href="index.html#services" class="nav_services">Services</a><span>Services Page</span></li>
       <li><a href="index.html#contact" class="nav_contact">Contact</a><span>Contact Page</span></li>
    </ul>
    </div>
    <!-- END: menu -->
  </div><!-- END: header-bg -->
</div><!-- END: header -->
    <div id="portfolio" class="scrol-page">
        <!-- BEGIN: page title -->
        <div class="page-title clearfix">
          <div class="page_caption">
            <h1>Portfolio</h1>
            <div class="span">Overview / project / details</span>
          </div>
           </div>
           <br /><br /><br />
           <!--END: page title -->
          <div id="content_wrapper">
          <div class="double-line"></div>
       <!-- Begin content -->
       <div id="wrapper">
		<div id="page_content_wrapper">
          <div class="inner">
			<div class="inner_wrapper">
            <!-- BEGIN: portfolio page -->
            <div id="portfolio-item-wrapper">
                 <div class="one-third">
                 <div class="item-details">
                 <div class="section-border">
					<h4>Overview</h4>
				</div>
                   <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna. Saque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
                   <a href="#" class="button small rounded green">Launch website &raquo;</a>
                   <div class="space_small"></div>
                   <div class="section-border">
					<h4>Details:</h4>
				</div>
                   <ul id="portfolio-sidebar-details">
                     <li><span>by</span> <a href="#" class="button small rounded green">John Doe</a></li>
                     <li><span>in</span> <a href="#" class="button small rounded green">Web design</a><a href="#" class="button small rounded green">Branding</a></li>
                     <li><span>on</span> <a href="#" class="button small rounded green">08 June 2012</a></li>
                     <li><span>site</span> <a href="#" class="button small rounded green">www.website.com</a></li>
                   </ul>
                 </div><!--END ITEM-DETAILS-->
               </div><!--END ONE THIRD-->	
             
             <div class="two-third last">
             <div class="flexslider">
             <ul class="slides">
    			<li><img src="images/portfolio-gallery-1.jpg" alt="Image" /></li>
                <li><img src="images/portfolio-gallery-2.jpg" alt="Image" /></li>
                <li><img src="images/portfolio-gallery-3.jpg" alt="Image" /></li>
            </ul>
           </div>
           </div><!--END TWO-THIRD-->
           
           <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
		   <script src="js/jquery.flexslider.js" type="text/javascript"></script>
           <script type="text/javascript">
		  $(document).ready(function(){
          <!-- FlexSlider -->
			$('.flexslider').flexslider({
				animation: "slide", 
				slideshow: true,
				slideshowSpeed: 1800,
				});
		});
		
	</script>
          </div><!--END PORTFOLIO-ITEM-WRAPPER-->
         </div>
        </div>
       <br class="clear"/><br/><br/>
      </div>
     </div>
    </div>
   <div class="double-line"></div>
   </div>
   </div>
  <!-- End content -->
 <!-- END: portfolio page -->
 <!-- BEGIN .footer_container -->
 <div id="footer">

	<div id="footer-content">
				
		<div id="footer-top" class="clear">
				
			<div class="one-fourth">
				<h3>About us</h3>	
				<p>There are many <strong>variations</strong> of passages of Lorem Ipsum available, but the <strong>majority</strong> have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>				
			</div><!--END ONE-FOURTH-->	
						
						
			<div class="one-fourth">
				<h3>Latest posts</h3>
					
				<ul>												
					<li><a href="#">Praesent convallis metus imperdiet.</a>	</li>
													
					<li><a href="#">Curabitur pharetra, ante ac suscipit.</a></li>
														
					<li><a href="#">Imperdiet the dui posuere sollicitudin.</a></li>	
													
					<li><a href="#">Cras mattis consectetur purus.</a></li>		
														
					<li><a href="#">Lorem ipsum dolor sit amet, elit.</a></li>		
				</ul><!--END UL-->
			</div><!--END ONE-FOURTH-->	
						
						
			<div class="one-fourth">	
				<h3>Latest tweets</h3>
				<div class="twitter-feed"></div><!-- end twitter-feed -->
			</div><!--END ONE-FOURTH-->
						
						
			<div class="one-fourth last">
				<h3>Contact Information</h3>
                <div class="footer-information">
                   <ul>
                      <li class="address_1"><strong>Address:</strong> Street 9890, New Something 1234, Country</li>
                      <li class="phone_1"><strong>Phone:</strong> + 1 800 559 6580</li>
                      <li class="email_1"><strong>Email:</strong> <a href="mailto:info@smart.com">info@smart.com</a></li>
                   </ul><!--END ul-->
              </div><!--END contact-information-->			</div><!--END ONE-FOURTH LAST-->
			
		</div><!--END FOOTER-TOP-->
	
		
		<div id="footer-bottom" class="clear">
						
			<div class="one-half">
				<p>Copyright &copy; 2012 Pulsecolor. All rights reserved.</p>
			</div><!--END ONE-HALF-->	
					
			
		</div><!--END FOOTER-BOTTOM-->	
			
	</div><!--END FOOTER-CONTENT-->	
		
</div><!--END FOOTER-->

<!-- END FOOTER -->
  </div>
  </div>
</body>
</html>